<!--  -->
<template>
    <div class="flex justify-between flex-wrap">
        <template v-for="(item,index) in couponList">
            <div class="coupon-item flex justify-between" :key="index" @click="$emit('showCoupon',item)"> 
                <div class="flex-1">
                    <div class="shop-name ellipsis ">{{item.shop_name}}</div>
                    <div class="coupon-name mt-14">{{item.coupon_name}}</div>
                </div>
                <div class="price f-medium">
                    <div class="f-10">
                        ￥<span class="price-num f-bold">{{item.coupon_price}}</span>
                    </div>
                    <div class="mt-6 f-8">{{item.coupon_limit}}</div>
                    <div class="tip-btn color-white" >
                        {{item.coupon_tag}}
                    </div>
                </div>
                <!-- <span class="hot-label justify-center aligin-center color-white flex">热</span> -->
            </div>
        </template>
    </div>
</template>

<script>
export default {
    props:{
        couponList:{
            type:Array,
            default:()=>{
                return []
            },
            required:true
        }
    },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.f-8{
    font-size: 8px;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-1{
    flex: 1;
}
.coupon-item{
    position: relative;
    margin-bottom: 9px;
    padding: 6px 8px ;
    width: 167px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #FFF7D3;
    &:nth-child(2n){
        background: #FFF3F3;
    }
    .shop-name{
        width: 100px;
        font-size: 16px;
        height: 20px;
        line-height: 20px;
        color: #DC471F;
    }
    .coupon-name{
        font-size:12px;
        font-weight:400;
        color:rgba(220,71,31,1);
        line-height:24px;
        opacity:0.8;
    }
    .price{
        color: #053B2D;
        text-align: center;
    }
    .price-num{
        font-size: 20px;
    }
    .tip-btn{
        margin: 4px auto 0;
        width: 50px;
        height: 14px;
        background:rgba(215,9,30,1);
        border-radius:5px;
        font-size: 8px;
        text-align: center;
        line-height: 14px;
    }
    .hot-label{
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%,-50%);
        height: 17px;
        width: 17px;
        border-radius: 50%;
        font-size: 9px;
        background: #F15A5A;
    }
}
</style>